<template>
  <div class="strategy-container">
    <!-- 标题区域 -->
    <div class="section-header">
      <h1 class="main-title">
        <el-icon>
          <Collection />
        </el-icon>探索发现 · 热门攻略集合
      </h1>
      <div class="sub-title">精选全球优质旅行指南</div>
    </div>

    <!-- 攻略列表 -->
    <div class="card-grid">
      <el-card
        v-for="(item, index) in Data"
        :key="index"
        class="strategy-card"
        shadow="hover"
        @click="handleCardClick(item.id)"
      >
        <!-- 封面图 -->
        <div class="cover-wrapper">
          <el-image
            :src="item.coverImg"
            fit="cover"
            class="cover-image"
            :preview-src-list="[item.coverImg]"
          >
            <template #error>
              <div class="image-error">
                <el-icon>
                  <Picture />
                </el-icon>
                <span>封面加载中</span>
              </div>
            </template>
          </el-image>
        </div>

        <!-- 内容区域 -->
        <div class="card-content">
          <h2 class="card-title">
            <el-icon>
              <Guide />
            </el-icon>
            {{ item.title || '未知标题' }}
          </h2>

          <div class="content-preview" v-html="stripHtml(item.content)"></div>

          <!-- 元信息 -->
          <div class="meta-info">
            <el-tag type="info" size="small">
              <el-icon>
                <User />
              </el-icon>
              {{ item.nikeName || '匿名作者' }}
            </el-tag>
            <span class="view-count">
              <el-icon>
                <View />
              </el-icon>
              {{ item.viewCount || 0 }}次浏览
            </span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-wrapper">
      <el-icon class="loading-icon" :size="40">
        <Loading />
      </el-icon>
      <span>正在加载精彩攻略...</span>
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";
import {
  Collection,
  Picture,
  Loading,
  Guide,
  View,
  User
} from "@element-plus/icons-vue";
import { articleViewService } from "@/api/hostTen";
import { articleListService } from "@/api/list";
import { useRouter } from "vue-router";

const router = useRouter();
const handleCardClick = id => {
  router.push(`/user/show/` + id);
  articleViewService(id);
  fetchData();
};
const Data = ref([]);
const loading = ref(true);

// 去除HTML标签
const stripHtml = html => {
  return html?.replace(/<[^>]+>/g, "") || "";
};

const fetchData = async () => {
  try {
    const res = await articleListService();
    Data.value = res.data || [];
  } catch (error) {
    console.error("加载失败:", error);
    ElMessage.error("获取攻略列表失败");
  } finally {
    loading.value = false;
  }
};

fetchData();
</script>
  
<style scoped>
.strategy-container {
  max-width: 1400px; /* 扩大容器宽度 */
  margin: 0 auto;
  padding: 40px 30px; /* 增加内边距 */
  background: linear-gradient(
    35deg,
    #f8f9fc 0%,
    #eef2ff 100%
  ); /* 调整渐变角度 */
  min-height: 100vh;
}

.section-header {
  text-align: center;
  margin-bottom: 60px; /* 增加下边距 */
  position: relative;

  .main-title {
    color: #2d4279;
    font-size: 2.5rem; /* 增大字号 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(45, 66, 121, 0.1); /* 添加文字阴影 */

    .el-icon {
      color: #409eff;
      filter: drop-shadow(0 2px 4px rgba(64, 158, 255, 0.3)); /* 图标投影 */
      transition: transform 0.3s ease;
    }

    &:hover .el-icon {
      transform: rotate(15deg); /* 悬停图标动画 */
    }
  }

  .sub-title {
    color: #606266;
    font-size: 1.2rem;
    font-family: "Microsoft YaHei", sans-serif; /* 更换字体 */
    position: relative;
    display: inline-block;

    &::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent,
        #409eff,
        transparent
      ); /* 添加装饰线 */
    }
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* 自适应列宽 */
  gap: 40px; /* 增大间距 */
}

.strategy-card {
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  backdrop-filter: blur(5px); /* 背景模糊效果 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 玻璃质感边框 */

  &:hover {
    transform: translateY(-8px) scale(1.02); /* 增强悬停效果 */
    box-shadow: 0 12px 30px rgba(45, 66, 121, 0.15) !important;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    transition: 0.5s;
  }

  &:hover::before {
    left: 100%; /* 添加流光动画效果 */
  }
}

.cover-wrapper {
  height: 280px; /* 增加封面高度 */
  overflow: hidden;
  position: relative;
  border-radius: 12px 12px 0 0;

  .cover-image {
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;

    &:hover {
      transform: scale(1.1) rotate(2deg); /* 增加旋转动画 */
    }
  }
}

.card-content {
  padding: 25px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    #ffffff 100%
  ); /* 内容区渐变 */

  .card-title {
    color: #1a2b50;
    font-size: 1.5rem;
    margin: 20px 0;
    position: relative;
    padding-left: 10px;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 80%;
      background: #409eff; /* 标题装饰竖线 */
      border-radius: 2px;
    }
  }
}

.content-preview {
  color: #606266;
  line-height: 1.8;
  font-size: 1rem;
  position: relative;
  padding-left: 20px;

  &::before {
    content: "“";
    position: absolute;
    left: -15px;
    top: -10px;
    font-size: 3em;
    color: #409eff;
    opacity: 0.3; /* 添加引号装饰 */
  }
}

.meta-info {
  border-top: 1px dashed #e4e7ed; /* 虚线分割线 */
  padding-top: 15px;
  margin-top: 25px;

  .el-tag {
    background: rgba(64, 158, 255, 0.1);
    border: 1px solid rgba(64, 158, 255, 0.2);
    color: #409eff;
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
      transform: translateX(5px);
    }
  }
}

.loading-wrapper {
  /* 升级加载动画 */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 15px;
  padding: 30px;
  margin: 40px auto;
  width: fit-content;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  .loading-icon {
    animation: pulse 1.5s ease infinite; /* 新增脉冲动画 */
  }

  span {
    display: block;
    margin-top: 15px;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #2d4279, #409eff);
    -webkit-background-clip: text;
    color: transparent;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式优化 */
@media (max-width: 992px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cover-wrapper {
    height: 220px;
  }

  .main-title {
    font-size: 2rem !important;
  }
}

@media (max-width: 576px) {
  .strategy-container {
    padding: 30px 15px;
  }

  .card-content {
    padding: 20px;
  }
}
</style>